<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/header::commonHeader('主页')">
<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div th:include="/common/menu::commonMenu"></div>
        <div th:include="/common/nav::commonNav"></div>
        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content">
                                <br>
                                <form id="userSearchForm" data-parsley-validate="" class="form-horizontal form-label-left"
                                      novalidate="" onsubmit="return false" th:action="@{/user/list}">
                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                                        <input type="text" name="keyword" class="form-control col-md-4 col-xs-4"
                                               placeholder="请输入查询用户名/真实姓名关键字">
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                                        <button class="btn btn-primary" type="button" onclick="$c.dataTableSearch(userTable,'userSearchForm')">搜索</button>
                                        <button class="btn btn-success" type="button" onclick="addUser()">新增</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div th:include="/common/table/tool::commonTableTool('用户列表', 'Users')"></div>
                            <div class="x_content">
                                <div class="row">
                                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                                        <ul id="myTabUser" class="nav nav-tabs bar_tabs" role="tablist">
                                            <li role="presentation" class="active"><a href="#tab_user1" id="home-tab"
                                                                                      role="tab" data-toggle="tab"
                                                                                      aria-expanded="true">正常用户</a>
                                            </li>
                                            <li role="presentation" class=""><a href="#tab_user2" role="tab"
                                                                                id="profile-tab" data-toggle="tab"
                                                                                aria-expanded="false">冻结用户</a>
                                            </li>
                                        </ul>
                                        <div id="myTabUserContent" class="tab-content">
                                            <div role="tabpanel" class="tab-pane active in fade " id="tab_user1"
                                                 aria-labelledby="home-tab">
                                                <div th:include="/user/table::noramlList('userTable')"></div>
                                            </div>
                                            <div role="tabpanel" class="tab-pane fade" id="tab_user2"
                                                 aria-labelledby="profile-tab">
                                                <p>
                                                <div style="text-align: center">功能待开发，敬请期待!</div>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer th:include="/common/footer::commonFooter"></footer>
</body>
<script>
    const userTable = $c.dataTableV2('userTable', '[[@{/user/list}]]', columns)
    // 用户编辑，用户添加
    let userEditDialog, userAddDialog, userFootDialog;

    function editUser(id) {
        userEditDialog = $c.dialog('用户编辑', '[[@{/user/edit}]]?id=' + id, '50%')
    }

    function addUser() {
        userAddDialog = $c.dialog('用户添加', '[[@{/user/add.html}]]', '50%')
    }

    function foot(id) {
        userFootDialog = $c.dialog('用户足迹', '[[@{/user/foot.html}]]?id=' + id, ['80%', '80%'])
    }

    function delUser(id) {
        $c.delRecord("确定删除该用户记录", '[[@{/user/del?id=}]]' + id, userTable);
    }
</script>
</html>
